<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props</title>

</head>

<body>
    <div id="app">
        <!-- <div id="" title="" class="" style="" ...></div> -->
        <!-- <my-component msg="我是消息"> </my-component>
        <my-component :msg="num"> </my-component>
        <my-component msg="123"> </my-component>
        <my-component :msg="123"> </my-component>
        <my-component msg="true"> </my-component>
        <my-component :msg="true"> </my-component>
        <my-component msg="[1,2,3]"> </my-component>
        <my-component :msg="[1,2,3]"> </my-component>
        <my-component msg="{a:1,b:2}"> </my-component>
        <my-component :msg="{a:1,b:2}"> </my-component> -->

        <!-- <my-component :age="18" gender="男" msg="我是消息"></my-component> -->
        <!-- <my-component :age="age" :gender="gender" :msg="msg"></my-component> -->
        <my-component :age="age" :bar="{a:1}"></my-component>
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        class Cat {
            constructor(name, color) {
                this.name = name
                this.color = color
            }
        }
        const { createApp, ref, onMounted, nextTick, getCurrentInstance } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const num = ref(10)
                const age = ref(20)
                const gender = ref('女')
                const msg = ref('我是父组件的消息')
                return {
                    num,
                    age,
                    gender,
                    msg
                }
            }
        })


        // 全局注册组件
        // app.component(组件名称,组件对象)
        app.component('my-component', {
            // 声明组件的props属性
            // props: ["msg", "age", "gender"],
            props: {
                // key:value 形式的声明
                // key 对应 props 中的属性名
                // value 对应 props 的类型
                msg: {
                    type: String,
                    default: '我是默认消息' // 默认值
                },
                age: {
                    type: Number,
                    required: true // 必填属性
                },
                gender: {
                    type: String
                },
                isShow: {
                    type: Boolean,
                    default: undefined
                },
                foo: [String, Number],
                bar: {
                    type: Object,
                    // 默认值是一个工厂函数
                    default(rawProps) {
                        console.log("工厂函数被调用", rawProps);

                        // 返回值
                        return {
                            a: 1,
                            b: 2,
                            c: 3,
                            d: 4
                        }
                    }
                },
                baz: {
                    type: Function,
                    default() {
                        console.log("baz被调用");
                        return 'baz'
                    }
                },
                bza: {
                    type: Cat,
                    default() {
                        return new Cat("花花", "白色")
                    }
                }
            },
            // 模板 对应就是DOM结构
            template: `
                <div>
                    <h1>我是自定义组件</h1>
                    <p>我是自定义组件的描述</p>
                    <div> {{msg}} 类型：{{typeof(msg)}} </div>
                    <div> {{age}} 类型：{{typeof(age)}} </div>
                    <div> {{gender}} 类型：{{typeof(gender)}} </div>
                    <div> {{isShow}} 类型：{{typeof(isShow)}} </div>
                    <div> {{bar}} 类型：{{typeof(bar)}} </div>
                    <div> {{bza}} 类型：{{typeof(bza)}} </div>
                </div>
            `
        })
        // 挂载到dom
        app.mount('#app')




    </script>
</body>

</html>